.v--upload-image-list {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	user-select: none;
	.v-upload-item {
		width: 150px;
		height: 150px;
		overflow: hidden;
		border-radius: 10px;
		position: relative;
		border: 1px solid #c0ccda;
		margin-right: 15px;
		margin-bottom: 15px;
		cursor: move;
		transition: all 0.15s;
		&.on-drager {
			border: 1px dashed var(--el-color-primary);
			&.upload-button {
				background: #ecf5ff;
				.icons {
					color: var(--el-color-primary);
				}
			}
		}
		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(#000, 0.55);
			z-index: 5;
			transition: all 0.25s;
			opacity: 0;
		}
		&.upload-button {
			background: #fafafa;
			cursor: pointer;
			&::before {
				display: none;
			}
			.upload-input {
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				z-index: 7;
				opacity: 0;
				cursor: pointer;
			}
			.icons {
				opacity: 1;
				color: #909399;
				.v-upload-icon {
					width: 30px;
					height: 30px;
				}
			}
		}
		img {
			width: 100%;
			height: 100%;
			display: block;
			object-fit: cover;
			border: 0;
		}
		.icons {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			height: 0;
			margin: auto;
			z-index: 6;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all 0.25s;
			opacity: 0;
			.v-upload-icon {
				width: 20px;
				height: 20px;
				cursor: pointer;
				margin-left: 15px;
				margin-right: 15px;
			}
		}
		&:hover {
			&::before {
				opacity: 1;
			}
			.icons {
				opacity: 1;
			}
		}
	}
}
.v--upload-image-enter-active,
.v--upload-image-leave-active {
	transition: all 0.25s;
}

.v--upload-image-enter-from,
.v--upload-image-leave-to {
	opacity: 0;
	transform: translateY(-10px);
}
